<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    text-color="#316AB6"
    style="font-weight:bold;"
    :router="true"
    :default-active="$route.path"
    active-text-color="#3D73BA"
  >
    <el-link
      target="_blank"
    >
      <img
        height="60px"
        src="../assets/学习.png"
        alt
        style="margin-left:-30px"
      />
    </el-link>
    <el-menu-item
      index="/"
      route="/"
      style="text-decoration-line:none;"
    >
      首页
    </el-menu-item>

    <el-menu-item
      index="/questionset"
      route="/questionset"
      style="text-decoration-line:none;margin-left:-40px"
    >
      问题集
    </el-menu-item>

    <el-menu-item
      index="/Findmate"
      route="/Findmate"
      style="text-decoration-line:none;margin-left:-40px"
    >
      寻找队友
    </el-menu-item>

    <el-menu-item
      index="/contest"
      route="/contest"
      style="text-decoration-line:none;margin-left:-40px"
    >
      赛事资讯
    </el-menu-item>

    <el-menu-item
      index="/user"
      route="/user"
      style="text-decoration-line:none;margin-left:-40px"
    >
      个人中心
    </el-menu-item>
    <div style="display: flex;align-items: center;margin-left:-20px">
      <el-input
        v-model="input"
        placeholder="请搜索输入内容"
        size="small"
        style="padding: 15px;"
        @keyup.enter.native='search(input)'
      ></el-input>
      <el-button
        type="success"
        icon="el-icon-search"
        size="small"
        @click="search(input)"
        plain
        round
      >搜索</el-button>
    </div>

    <div style="display: flex;align-items: center;">
      <el-button
        type="danger"
        round
        id="ask"
        @click="question"
      >我要提问 !</el-button>
    </div>

    <div>
      <div
        v-if="islogin"
        style="display: flex;flex-direction: row;align-items: center;margin-top:13px"
      >
        <UserLogin></UserLogin>
        <!-- <el-badge
          :value="12"
          style="margin-left:20px;line-height:35px;"
        >
          <el-button size="small">回复</el-button>
        </el-badge> -->
      </div>
      <Loginning
        v-else
        style="height:60px;"
      ></Loginning>
    </div>
  </el-menu>
</template>

<script>
import UserLogin from '../components/UserLogin.vue'
import Loginning from '../components/Loginning.vue'

export default {
  name: 'Menu',
  components: {
    UserLogin,
    Loginning
  },
  //   watch: {
  //   '$route'(to,from)
  //   {
  //     this.$router.go(0)
  //   }
  // },
  data () {
    return {
      input: '',
      show: 'false',
      islogin: !!window.sessionStorage.getItem('token')
    }
  },
  methods: {
    search (input) {
      this.$router.push({
        name: 'Search',//页面名字
        path:'/search',//页面路劲 和上面名字任意一个都可以
        query: {keyword: JSON.stringify(input)} // 参数传值
      })
      this.input = "";
    },
    questionset () {
      this.$router.push('/questionset', onComplete => { }, onAbort => { })
    },
    question () {
      this.$router.push('/question', onComplete => { }, onAbort => { })
    },
    contest () {
      this.$router.push('/contest', onComplete => { }, onAbort => { })
    },
    findmate(){
      this.$router.push('/Findmate', onComplete => { }, onAbort => { })
    },
  }
}
</script>

<style lang = "less" scoped>
.el-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
</style>
